<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + request.getContextPath() + "/";
%>
<html>
<head>
    <link href="/static/backstage/H-ui/static/h-ui/css/H-ui.min.css" rel="stylesheet" type="text/css"/>
    <link href="/static/backstage/H-ui/static/h-ui.admin/css/H-ui.login.css" rel="stylesheet" type="text/css"/>
    <link href="/static/backstage/H-ui/static/h-ui.admin/css/style.css" rel="stylesheet" type="text/css"/>
    <link href="/static/backstage/H-ui/lib/Hui-iconfont/1.0.8/iconfont.css" rel="stylesheet" type="text/css"/>
    <title>后台登录</title>

</head>
<body>
<div class="header">后台管理系统</div>
<div class="loginWraper">
    <div id="loginform" class="loginBox">
        <div class="form form-horizontal">
            <div class="row cl">
                <label class="form-label col-xs-3"><i class="Hui-iconfont">&#xe60d;</i></label>
                <div class="formControls col-xs-8">
                    <input id="name" type="text" value="${cookie.loginName.value}" placeholder="账户"
                           class="input-text size-L">
                </div>
            </div>
            <div class="row cl">
                <label class="form-label col-xs-3"><i class="Hui-iconfont">&#xe60e;</i></label>
                <div class="formControls col-xs-8">
                    <input id="password" type="password" value="${cookie.loginPwd.value}" placeholder="密码"
                           class="input-text size-L">
                </div>
            </div>
            <div class="row cl">
                <div class="formControls col-xs-8 col-xs-offset-3">
                    <input id="captcha" class="input-text size-L" type="text" placeholder="验证码"
                           style="width:150px;">
                    <img src="/captcha" id="captcha-img" height="41px">
                </div>
            </div>
            <div class="row cl">
                <div class="formControls col-xs-8 col-xs-offset-3">
                    <label for="remember-me">
                        <input type="checkbox" id="remember-me" checked>
                        记住我
                    </label>
                </div>
            </div>
            <div class="row cl">
                <div class="formControls col-xs-8 col-xs-offset-3">
                    <button id="login-btn" class="btn btn-primary radius size-L">
                        &nbsp;登&nbsp;&nbsp;&nbsp;&nbsp;录&nbsp;
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="footer">2660815137@qq.com</div>

<script src="/static/backstage/H-ui/lib/jquery/1.9.1/jquery.min.js"></script>
<script src="/static/backstage/H-ui/static/h-ui/js/H-ui.min.js"></script>
<script src="/static/backstage/H-ui/lib/layer/2.4/layer.js"></script>
<script>
    $(function () {
        // 点击切换验证码
        $("#captcha-img").click(function () {
            $("#captcha-img").attr("src", "/captcha?" + Math.random());
        });

        // 点击登录按钮
        $("#login-btn").click(function () {
            login()
        });
        //给整个浏览器窗口添加键盘按下事件
        $(window).keydown(function (e) {
            //如果按的是回车键，则提交登录请求
            if (e.keyCode == 13) {
                login();
            }
        });

        // 登录请求
        function login() {
            // 收集参数
            let name = $("#name").val().trim();
            let password = $("#password").val().trim();
            let captcha = $("#captcha").val().trim();
            let isRemember = $("#remember-me").prop("checked");
            // 表单验证
            if (name == "") {
                alert("用户名不能为空");
                $("#name").focus();
                return;
            } else if (password == "") {
                alert("密码不能为空");
                $("#password").focus();
                return;
            } else if (captcha == "") {
                alert("验证码不能为空");
                $("#captcha").focus();
                return;
            }


            layer.msg('正在登录. . .', {icon: 16, time: 1000});
            $.post("/backstage/login", {
                username: name,
                password: password,
                captcha: captcha,
                isRemember, isRemember
            }, function (data) {
                if (data.code == "1") {
                    //跳转到主页面
                    window.location.href = "/backstage/index";
                } else {
                    //提示信息
                    layer.msg(data.message, {icon: 2});
                }
            });
        }
    });
</script>
</body>
</html>
